<template>
	<vs-col :w="2">
		<div class="barra">模板组件</div>
		<div class="flex wrap padding-lr">
			<div
				:style="`--time:${(index + 1) * 0.2 + 1}s`"
				class="card pointer relative text-center globally"
				v-for="(item, index) in components"
				:key="index"
				draggable="true"
				@dragstart="$event.dataTransfer.setData('Components', item.type)"
			>
				<div>
					<vs-icon :icon="item.icon" />
					<div>{{ item.name }}</div>
				</div>
			</div>
		</div>
	</vs-col>
</template>

<script>
import { components } from '@/common/json.js';
export default {
	name: 'componentModule',
	data() {
		return {
			components
		};
	}
};
</script>

<style scoped>
.card {
	color: white;
	width: 110px;
	height: 80px;
	margin: 10px;
	border-radius: 12px;
	font-size: 16px;
	animation: show var(--time) 1;
	background: rgba(36, 33, 69, 1);
	box-shadow: 6px 6px 0px 0px rgba(36, 33, 69, 0.3);
}
</style>
